<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="js/vue.js"></script>
</head>
<h1>Hello world!</h1>

<body>
    <div id="app">
        <input v-model="user.score">
        <table>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>分数</th>
                <th>等级</th>
            </tr>
            <tr align="center" v-for="(user, index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>{{user.gender==1?'男':'女'}}</td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score<80">一般</span>
                    <span v-else-if="user.score<90">及格</span>
                    <span v-else>优秀</span>
                </td>
            </tr>
            <tr align="center" v-model="user">
                <td>99</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>{{user.gender==1?'男':'女'}}</td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score<80">一般</span>
                    <span v-else-if="user.score<90">及格</span>
                    <span v-else>优秀</span>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 70
            }, {
                name: "Bob",
                age: 21,
                gender: 1,
                score: 82
            }, {
                name: "Sunny",
                age: 22,
                gender: 2,
                score: 95
            },
            ],
            user: {
                name: "Jerry",
                age: 22,
                gender: 2,
                score: 95
            },
            score:80
        }
    })
</script>